<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum=1.0,minimum-scale=1.0,user-scalable=0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <link rel="stylesheet" href="./04.css">
    <!-- swiper 插件 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
    <!-- 百度api -->
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=SuAbrtK1Bu5V9XISRleW91vpdEVQ70IZ">
        </script>
</head>

<body>
    <div class="max">
        <div class="top">
            <div class="imglogo">
                <img src="../image/logo.jpg" alt="">
            </div>
            <div class="my">
                <img src="../image/my.jpg" alt="">
                <img src="../image/xiazai.jpg" alt="">
            </div>
        </div>
        <!-- 主页轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../image/img2.png" alt=""></div>
                <div class="swiper-slide"><img src="../image/img3.png" alt=""></div>
                <div class="swiper-slide"><img src="../image/img4.png" alt=""></div>
                <div class="swiper-slide"><img src="../image/img5.png" alt=""></div>
                <div class="swiper-slide"><img src="../image/img6.png" alt=""></div>
            </div>
        </div>
        <!-- 介绍 -->
        <div class="jie">
            <div class="jie1">
                <p>天鹅湾小区精装两居,满五唯一,业主换房急售</p>
            </div>
            <div class="jie2">
                <p>576万元(单价: 46424元/平)</p>
                <span><img src="../image/phone.png" alt=""></span>
                <p class="p1">
                    挂牌时间2015年6月20日
                </p>
                <div class="btn1">学区房</div>
                <div class="btn1">独家</div>
                <div class="btn1">满五唯一</div>
            </div>

        </div>
        <div class="style">
            <div class="sty1">
                户型:3室2厅
            </div>
            <div class="sty1">
                面积:100平
            </div>
        </div>
        <div class="style">
            <div class="sty1">
                户型:3室2厅
            </div>
            <div class="sty1">
                面积:100平
            </div>
        </div>
        <div class="style">
            <div class="sty1">
                户型:3室2厅
            </div>
            <div class="sty1">
                面积:100平
            </div>
        </div>

        <div class="style">
            <div class="sty1">
                户型:3室2厅
            </div>
            <div class="sty1">
                面积:100平
            </div>
        </div>
        <div class="style">
            <div class="sty1">
                地铁:离西二旗地铁站800米
            </div>
        </div>
        <div class="style">
            <div class="sty1">
                小区:珠江帝景
            </div>
        </div>
        <div class="style">
            <div class="sty1">
                学校:北京市第二实验小学
            </div>
        </div>
        <div class="sty2">更多房源信息</div>
        <!-- 介绍特色 -->
        <div class="characteristic">
            <div class="styles">
                <div class="sty3">
                    房源特色
                </div>
            </div>
            <div class="style2">
                <div class="text">
                    小区环境优雅，虽处闹市中(小区南200米有美廉美超市、
                    西30米有华联商场、星美国际影城、东北角就是大中电器、
                    小区东100米有汇佳幼儿园、昌平实验一小，昆泰国际大酒...
                </div>
            </div>
            <div class="sty2">更多特色</div>
        </div>
        <div class="huxing">
            <div class="styles">
                <div class="sty3">
                    户型分间
                </div>
            </div>
            <div class="fangimg">
                <div class="fangleft">
                    <img src="../image/img1.png" alt="">
                </div>
                <div class="fangright">
                    <p>当前格局</p>
                    <p>2室1厅 96㎡ 南北</p>
                    <div class="btn1">南北通透</div>
                    <div class="btn1">全明格局</div>
                </div>
            </div>
            <div class="fangimg">
                <div class="fangleft">
                    <img src="../image/img2.png" alt="">
                </div>
                <div class="fangright">
                    <p>当前格局</p>
                    <p>2室1厅 96㎡ 南北</p>
                    <div class="btn1">南北通透</div>
                    <div class="btn1">全明格局</div>
                </div>
            </div>

        </div>
        <div class="ip">
            <p>位置及周边</p>
        </div>
        <div class="baiduip">
            <div id="container"></div>
        </div>
        <div class="ip">
            <p>推荐房源</p>
        </div>
        <div class="fangimg">
            <div class="fangleft">
                <img src="../image/img2.png" alt="">
            </div>
            <div class="fangright">
                <p class="pf">文化部中间层</p>
                <div class="box">
                    <p>2室1厅 96㎡ 南北</p>
                    <span>1105万</span>
                </div>
                <div class="box">
                    <p>红庙北里</p>
                    <span id="ps">12347元/平</span>
                </div>
                <div class="btn1">学区房</div>
            </div>
        </div>
        <div class="fangimg">
            <div class="fangleft">
                <img src="../image/img2.png" alt="">
            </div>
            <div class="fangright">
                <p class="pf">文化部中间层</p>
                <div class="box">
                    <p>2室1厅 96㎡ 南北</p>
                    <span>1105万</span>
                </div>
                <div class="box">
                    <p>红庙北里</p>
                    <span id="ps">12347元/平</span>
                </div>
                <div class="btn1">学区房</div>
            </div>
        </div>
        <div class="fangimg">
            <div class="fangleft">
                <img src="../image/img2.png" alt="">
            </div>
            <div class="fangright">
                <p class="pf">文化部中间层</p>
                <div class="box">
                    <p>2室1厅 96㎡ 南北</p>
                    <span>1105万</span>
                </div>
                <div class="box">
                    <p>红庙北里</p>
                    <span id="ps">12347元/平</span>
                </div>
                <div class="btn1">学区房</div>
            </div>
        </div>

        <div class="fangimg">
            <div class="fangleft">
                <img src="../image/img2.png" alt="">
            </div>
            <div class="fangright">
                <p class="pf">文化部中间层</p>
                <div class="box">
                    <p>2室1厅 96㎡ 南北</p>
                    <span>1105万</span>
                </div>
                <div class="box">
                    <p>红庙北里</p>
                    <span id="ps">12347元/平</span>
                </div>
                <div class="btn1">学区房</div>
            </div>
        </div>
        <div class="bottom">
            <div class="bot1">
                北京找房无忧>首页
            </div>
            <div class="logo1">
                <img src="../image/apple.png">
                <div>
                    iPhone <br> 客户端
                </div>
            </div>
            <div class="logo1">
                <img src="../image/apple.png">
                <div>
                    iPhone <br> 客户端
                </div>
            </div>
            <p>北京找房无忧房地产经纪公司</p>

            <p>网络经营许可证京ICP备20160812号</p>
        </div>
    </div>
    <script>
        var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            autoplay: true,//自动切换
        })
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(125.191911, 42.962332);
        map.centerAndZoom(point, 15); 
    </script>
</body>

</html>